<template>
    <div>
        <!-- 导航栏 -->
        <mt-header fixed title="宠物圈" style="background: #f49b00">
            <router-link to="" slot="left">
          <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </router-link>
        </mt-header>
    <div style="height: 40px"></div>
        <!-- 正文区域开始 -->
        <div class="question">
            <!-- 标题开始 -->
            <div class="question-header">
                <div class="question-header-title">
                   {{text.title}}
                </div>
                <div class="question-header-datetime">
                   发布时间：{{time(text.time)}}
                </div>
            </div>
            <!-- 内容开始 -->
            <div class="question-content">
                <img  :src="`${text.pic}`">
                <div class="rich-content" >
                    {{text.content}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                text: [],
            }
        },
        mounted(){
            this.getdata()
        },
        methods: {
            // 发送请求，获得宠物圈详情页数据
            getdata() {
                this.axios.get(`/text/details?did=${this.$route.query.did}`).then(res=>{
                    console.log(res);
                    this.text = res.data.results[0]
                })
            },
            // 转换时间函数
            time(time) {
                time = this.dayjs(time).format("YYYY-MM-DD");
                return time
            }
        },
    }
</script>

<style lang="scss" scoped>
.article{
    background: #f6f6f6;
    height: 100vh;
}
.question-header{
    margin-bottom: 5px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(26,26,26,.1);
}
.question-header-title {
    font-size: 18px;
    color: #1a1a1a;
    line-height: 1.5;
}
.question-header-datetime{
    margin-top:5px;
    font-size:14px;
    color:#646464;
}

.question-content {
    padding: 10px;
    background-color:#fff;
    img{
        width:100%;
    }
    div{
        padding: 5px 0;
        line-height: 2;
    }
}

::v-deep .mint-header-title{
  font-size: 15px;
}
</style>